<template>
  <div class="bg-[#1a2c38] w-full min-375 h-auto">
    <div class="container w-full mt-4">
      <div class="flex items-center flex-wrap text-white">
        <div
          v-for="(item, index) in [...dataList, ...cusActiveMenu]"
          class="w-[390px] h-[220px] rounded-xl bg-[#243745] my-2 mx-1"
          @click="detailsInfo(item)"
        >
          <div
            class="w-full h-[150px] bgc"
            :style="{
              backgroundImage: `url(${main.static_base_url}${item.active_image})`
            }"
          ></div>
          <div class="flex items-center justify-between px-4 h-[66px]">
            <div>
              <div>{{ getTypeActive(item) }}</div>
              <div
                class="text-xs text-[#838586]"
                v-if="item.time && item.time.type == 'range'"
              >
                {{
                  dateTimeZone(
                    item.time.data.end_at,
                    "{y}-{m}-{d} {h}:{i}:{s}",
                    main.timeZone
                  )
                }}
              </div>
              <span v-else class="text-xs text-[#838586]">
                {{ $t("layer.checkin.permanent") }}
              </span>
            </div>

            <div
              class="bg-[#1475e1] rounded-md px-4 py-2 text-[#fff] cursor-pointer"
            >
              {{ $t("layer.activity.inProgress") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Tools">
import { nextTick, onActivated, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { mainAct } from "@/store/activeda";
import { menu } from "@/store/menu";
import { dateTimeZone } from "@/utils/date";
import { useI18n } from "vue-i18n";
import { getActiveList } from "@/api/active.js";

const menuJs = menu();
const { t } = useI18n();
const router = useRouter();
const main = mainAct();
// const cusActiveMenu = computed(() => {
//   let arr = menu().getActiveCustomizeViewData();
//   console.log("arr-------------arr", arr);

//   if (arr.length) {
//     arr.map(item => {
//       item.active_image = item.active_cover_image;
//     });
//   }
//   return arr;
// });

const detailsInfo = item => {
  router.push({ path: "/details", query: { key: item.key } });
};

const getTypeActive = val => {
  if (/^[0-9]+$/.test(val.key)) {
    // objKey 是数字
    return val.title;
  } else {
    return t(val.key);
  }
};

const dataList = ref([]);
const getDataList = () => {
  getActiveList().then(res => {
    if (res.errno == 0) {
      if (Array.isArray(res.data)) {
        dataList.value = res.data;
      }
    }
  });
};

const cusActiveMenu = ref([]);
const getCuive = async () => {
  let datas = [];
  datas = await menu().getActiveCustomizeViewData();

  if (datas.length) {
    datas.map(item => {
      item.active_image = item.active_cover_image;
    });
  }

  cusActiveMenu.value = datas;
};

onActivated(() => {
  getDataList();
  getCuive();
});
</script>
<style scoped lang="less">
.bgc {
  border-radius: 12px 12px 0 0;
  background: url("../../assets/imgs/header_bgc.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}
</style>
